import { PageContainer } from '@ant-design/pro-components';
import { useDispatch, useSelector } from '@umijs/max';

const AccessPage: React.FC = () => {
  // 获取数据的时候，要加上模块名，模块名就是文件的名称
  const name = useSelector((state: any) => {
    // console.log(state);
    return state.abc.name;
  });
  const num = useSelector((state: any) => state.abc.num);

  const dispatch = useDispatch();

  // 调用仓库的reducers和effects的函数现在也需要加模块化
  const changeName = () => {
    dispatch({
      type: 'abc/changeName',
      name: 'jerry',
    });
  };

  return (
    <PageContainer
      ghost
      header={{
        title: 'Dva数据流',
      }}
    >
      Dva数据流
      <div>name: {name}</div>
      <button onClick={changeName}>btn</button>
      <hr />
      <div>num: {num}</div>
      <button onClick={() => dispatch({ type: 'abc/increment' })}>num++</button>
      <button onClick={() => dispatch({ type: 'abc/asyncIncrement', n: 5 })}>
        async num++
      </button>
    </PageContainer>
  );
};

export default AccessPage;
